<template>
  <!-- 深加工信息 -->
  <div class="section">
    <div class="section-header">
      <h3 class="section-title">深加工信息</h3>
      <el-button plain>设置</el-button>
    </div>
    <div class="info-content">
      <el-row :gutter="1">
        <el-col :span="12">
          <strong>班组:</strong>
          <span>生产1组</span>
        </el-col>
        <el-col :span="12">
          <strong>负责人:</strong>
          <span>小陈</span>
        </el-col>
      </el-row>
    </div>
  </div>

  <!-- 食品安全信息 -->
  <div class="section">
    <div class="section-header">
      <h3 class="section-title">食品安全信息</h3>
    </div>
    <div style="margin-top: 25px;">
      <el-upload v-model:file-list="fileList1" action="http://localhost:5175/api/Managerment/UploadImages"
        list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove" :on-success="handleSuccess1" :before-upload="beforeUpload">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <!-- 显示预览图片 -->
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </div>
  </div>

  <!-- 供应商信息 -->
  <div class="section">
    <div class="section-header">
      <h3 class="section-title">供应商信息</h3>
    </div>

    <!-- 原料 -->
    <div class="material-section">
      <div class="material-title">
        <span class="blue-line"></span>原料
        <el-button plain style="margin-left: 15px;">设置</el-button>
      </div>

      <div class="info-content">
        <el-row :gutter="1">
          <el-col :span="12">
            <strong>生产批次:</strong>
            <span>20210718</span>
          </el-col>
        </el-row>
        <div class="related-materials">
          <div class="related-title">相关资料</div>
          <div style="margin-top: 25px;">
            <el-upload v-model:file-list="fileList1" action="http://localhost:5175/api/Managerment/UploadImages"
              list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove" :on-success="handleSuccess1" :before-upload="beforeUpload">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <!-- 显示预览图片 -->
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </div>
      </div>
    </div>

    <!-- 辅料 -->
    <div class="material-section">
      <div class="material-title">
        <span class="blue-line"></span>辅料
        <el-button plain style="margin-left: 15px;">设置</el-button>
      </div>
      <div class="info-content">
        <el-row :gutter="1">
          <el-col :span="12">
            <strong>生产批次:</strong>
            <span>20210718</span>
          </el-col>
        </el-row>
        <div class="related-materials">
          <div class="related-title">相关资料</div>
          <div class="images">
            <div style="margin-top: 25px;">
              <el-upload v-model:file-list="fileList1" action="http://localhost:5175/api/Managerment/UploadImages"
                list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove" :on-success="handleSuccess1" :before-upload="beforeUpload">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <!-- 显示预览图片 -->
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加剂 -->
    <div class="material-section">
      <div class="material-title">
        <span class="blue-line"></span>添加剂
        <el-button plain style="margin-left: 15px;">设置</el-button>
      </div>
      <div class="info-content">
        <el-row :gutter="1">
          <el-col :span="12">
            <strong>生产批次:</strong>
            <span>20210718</span>
          </el-col>
        </el-row>
        <div class="related-materials">
          <div class="related-title">相关资料</div>
          <div class="images">
            <div style="margin-top: 25px;">
              <el-upload v-model:file-list="fileList1" action="http://localhost:5175/api/Managerment/UploadImages"
                list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove" :on-success="handleSuccess1" :before-upload="beforeUpload">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <!-- 显示预览图片 -->
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 包材 -->
    <div class="material-section">
      <div class="material-title">
        <span class="blue-line"></span>包材
        <el-button plain style="margin-left: 15px;">设置</el-button>
      </div>
      <div class="info-content">
        <el-row :gutter="1">
          <el-col :span="12">
            <strong>生产批次:</strong>
            <span>20210718</span>
          </el-col>
        </el-row>
        <div class="related-materials">
          <div class="related-title">相关资料</div>
          <div class="images">
            <div style="margin-top: 25px;">
              <el-upload v-model:file-list="fileList1" action="http://localhost:5175/api/Managerment/UploadImages"
                list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove" :on-success="handleSuccess1" :before-upload="beforeUpload">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <!-- 显示预览图片 -->
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 企业信息 -->
  <div class="section">
    <div class="section-header">
      <h3 class="section-title">企业信息</h3>
      <el-button plain>设置</el-button>
    </div>
    <div class="info-content">
      <el-row :gutter="1">
        <el-col :span="12">
          <strong>公司名称:</strong>
          <span>四川锦祥食品有限公司</span>
        </el-col>
        <el-col :span="12">
          <strong>生产许可证号:</strong>
          <span>SC213205427680</span>
        </el-col>
      </el-row>

    </div>
  </div>
  <div class="section">
    <div class="section-header">
      <h3 class="section-title">企业照片</h3>
    </div>
    <div class="images">
      <div style="margin-top: 25px;">
        <el-upload v-model:file-list="fileList1" action="http://localhost:5175/api/Managerment/UploadImages"
          list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove" :on-success="handleSuccess1" :before-upload="beforeUpload">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <!-- 显示预览图片 -->
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'

const route = useRoute()

// 图片上传相关状态
const fileList1 = ref<UploadUserFile[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

// 图片上传相关方法
const handleSuccess1: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
  if (fileList1.value.length > 9) {
    ElMessage.warning('最多只能上传 9 张照片')
    return
  }
  const latestUid = uploadFiles[uploadFiles.length - 1].uid
  const imageUrl = uploadFile.url || response.url
  imgset('食品安全信息', latestUid.toString(), response.imgbase)
}

const handleExceed: UploadProps['onExceed'] = () => {
  ElMessage.warning('最多只能上传 9 张照片')
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  axios.get('http://localhost:5175/api/Managerment/Delimgrep', {
    params: {
      secondaryCategory: uploadFile.uid
    }
  }).then(res => {
    if (res.data.code === 400) {
      getimgset()
    }
  })
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

// 图片上传前的验证
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  const allowedExtensions = ['.jpg', '.jpeg', '.png']
  const maxFileSize = 5 * 1024 * 1024
  const fileExtension = file.name.split('.').pop()?.toLowerCase() || ''
  if (!allowedExtensions.includes(`.${fileExtension}`)) {
    ElMessage.error('只允许上传图片文件（.jpg, .jpeg, .png）')
    return false
  }
  if (file.size > maxFileSize) {
    ElMessage.error('文件大小不能超过 5MB')
    return false
  }
  return true
}

// 图片的添加
const imgset = (primaryCategory: string, secondaryCategory: string, imageUrl: string) => {
  const imglist = {
    sourceInfoId: route.query.sourceInfoId,
    primaryCategory,
    secondaryCategory,
    imageUrl
  }
  axios.post('http://localhost:5175/api/Managerment/Imgrep', imglist).then(res => {
    if (res.data.code === 100) {
      // 处理成功逻辑
    }
  })
}

// 图片的显示
const getimgset = () => {
  axios.get('http://localhost:5175/api/Managerment/Getimgrep', {
    params: {
      sourceInfoId: route.query.sourceInfoId
    }
  }).then(res => {
    fileList1.value = res.data.data.filter((img: any) => img.primaryCategory == '食品安全信息').map
      ((img: any) => ({
        name: img.primaryCategory,
        url: img.imageUrl,
        status: 'success',
        uid: img.secondaryCategory,
      }))
  })
}

// 生命周期钩子
onMounted(() => {
  getimgset()
})
</script>

<style scoped>
/* 页面容器样式 scoped */
.page-container {
  font-family: Arial, sans-serif;
  background-color: #fafafa;
  padding: 20px;
  max-width: 100%;
}

/* 顶部区域样式 */
.custom-header {
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  align-items: flex-start;
}

.header-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.avatar {
  width: 210px;
  height: 210px;
  border-radius: 8px;
  flex-shrink: 0;
}

.header-info {
  flex: 1;
}

/* 产品名称样式 */
.header-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.info-row label {
  font-weight: bold;
  color: #666;
  margin-right: 10px;
}

.info-row span {
  color: #333;
}

/* 分隔线样式 */
.divider-header {
  background-color: #f0f0f0;
  height: 20px;
}

/* 主体区域样式 */
.page-main {
  padding: 20px;
  background-color: #ffffff;
}

.section {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.section:last-child {
  border-bottom: none;
}

.info-content {
  padding: 20px;
  background-color: #ffffff;
}

.el-row {
  margin-top: 5px;
  margin-bottom: 1px;
}

.el-col {
  width: 50%;
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.el-col strong {
  margin-right: 10px;
  color: #333;
}

.el-col span {
  color: #333;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #409EFF;
  margin: 0;
}

.images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-container {
  position: relative;
}

.image-container img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.image-container button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
}

.add-button {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* 原料、辅料、添加剂、包材样式 */
.material-section {
  margin-bottom: 20px;
  margin-top: 10px;
}

.material-title {
  font-size: 14px;
  /* 字体大小 */
  color: #000;
  /* 黑色字体 */
  display: flex;
  align-items: center;
}

.blue-line {
  display: inline-block;
  width: 4px;
  /* 蓝色竖杆宽度 */
  height: 1em;
  /* 竖杆高度与字体大小一致 */
  background-color: #409EFF;
  /* 蓝色竖杆 */
  margin-right: 8px;
  /* 竖杆与文字的间距 */
  /* 四角圆形 */
  border-radius: 30%;
}

/* 相关资料样式 */
.related-materials {
  margin-top: 10px;
}

.related-title {
  font-size: 14px;
  /* 字体大小与原料等一致 */
  color: #000;
  /* 黑色字体 */
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  /* 浅色下划线 */
  margin-bottom: 15px;
  /* 增加与下方内容的间距 */
}
</style>